<template>
    <main-wrap ref="mianEle" :end="page.finished" :showOverTxt="page.lists.length>0">
        <div class="mycart-main-con">
            <goods-list :lists="page.lists" :type="5" @onClick="openDetail" @btnClick="doForgeable"/>
            <empty v-if="page.finished && page.lists.length<1"/>
        </div>
    </main-wrap>
    <my-dailog v-model:show="dgShowFlag" :showtopclose="true" :styleType="8">
        <nft-forgeable v-if="showflag==2" :detail="{'img':curItem.cardImg,'name':detail.cardName,...detail}" :type='2' :fragmentList='curItem.fragmentList' :nftType='6' @success='dgShowFlag=false'/>
        <cart-detail v-else :item="curItem" :id="curItem.cardId" :type='2' :fragmentList='curItem.fragmentList'/>
    </my-dailog>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import Image from '@/components/image.vue';
import goodsList from '@/components/goodsList.vue';
import cartDetail from './components/cartDetail.vue';
import nftForgeable from '@/components/nftForgeable.vue';
export default {
    components:{
        mainWrap,
        Image,
        goodsList,
        cartDetail,
        nftForgeable
    },
    setup(){
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            keyword:'',
            page:{
                lists:[],
                pageIndex:1,
                pageSize:100,
                finished: false
            },
            dgShowFlag:false,
            typeId:'',
            curItem:{},
            showflag:1,  // 1显示详情，2显示锻造
            detail:{}
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    // const res = await store.dispatch("shop/get_goods_list", {
                    //     page: state.page.pageIndex,
                    //     limit: state.page.pageSize,
                    //     orderField: 1,
                    //     orderType: 'desc',
                    //     //userAddress:state.userInfo.walletAddress
                    // });
                    const res = await store.dispatch("activity/get_my_card_list", {
                        walletAddress:state.userInfo.walletAddress
                    });
                    state.page.lists =[...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    state.page.finished = true;
                    // if (state.page.lists.length >= res.total) {
                    //     state.page.finished = true;
                    // }
                    resolve(true);
                }, 500);
            });
        }

        const openDetail = item=>{
            state.curItem = item
            state.showflag = 1
            state.dgShowFlag = true
            sessionStorage.setItem('cardItem',JSON.stringify(item))
        }      

        const resetScroll = async()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }

        const doForgeable = async (item)=>{
            const res = await store.dispatch('activity/get_card_detail',item.cardId)
            state.curItem = item
            state.detail = res.data
            state.showflag = 2
            state.dgShowFlag = true
        }
        return {
            ...toRefs(state),
            onLoad,
            openDetail,
            resetScroll,
            doForgeable
        }
    }
}
</script>

<style lang="scss" scoped>
   
    .mycart-main-con{
        padding: 10px 0 0 0;
    }

</style>